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TITLE OF THE INVENTION 

FRAMEWORK FOR CREATING USER 
INTERFACES FOR WEB APPLICATION PROGRAMS 

Field of the Invention 

[001] The present invention relates to a framework for creating user 

interfaces for application programs, such as web application programs. 

Background Information 

[002] User Interface or Ul programs enable interaction between users and 
application programs running on computers. There is a wide variety of user 
interfaces with different approaches in interaction and design. 

[003] Modern business applications are usually web based and typically a 
web browser is used to display and enable one or more web pages utilizing a user 
interface. 

[004] For business applications, web pages can be seen as the union of 
business data and user interface layout settings. The business data are retrieved for 
every application from one or more backend systems. There may be different 
backend systems for different applications, like Supply Chain Management (SCM), 
Customer Relationship Management (CRM), Financials (Fl), etc. The business data 
are organized in the web page according to the user interface layout settings. 

[005] For web pages with dynamic screen content, a server side scripting 
language is commonly used. The server side scripting language may include, but is 
not limited to, Java Server Pages (JSP), Active Server Pages (ASP) and/or Business 
Server Pages (BSP). However, the straightforward use of a server side scripting 
language will typically result in a solution that fits only the application it was originally 
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intended for, because there is no standard way of treating the user interface layout 
and the specialized tags provided by a reusable tag library. 

SUMMARY OF THE INVENTION 

[006] It is an object of the invention to provide an additional abstraction to 
achieve standardization of a user interface layout and merging it with business data. 

[007] In accordance with an embodiment of the invention, a framework is 
provided for generating a user interface for an application program, such as a web 
application program. The web application program may have numerous web pages 
that are displayed by means of a web browser receiving, for example, hypertext 
transfer protocol (HTTP) responses from a web server. The framework may provide 
a first set of database tables to define user interface screens including tables that 
may describe components, screen layout, component configuration, application 
model assignment, and/or event handling. The framework may further provide a first 
set of transactions for maintaining the first set of database tables, and may provide 
HTTP response means for generating the web pages by accessing the first set of 
database tables. 

[008] One or more embodiments of the invention may utilize components to 
define a reusable screen pattern, which can in turn be utilized to generate a user 
interface. 

[009] One or more embodiments of the invention may also utilize a second 
set of database tables based upon the first set of database tables. The second set of 
database tables may be used for customization and personalization of the user 
interface. 
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[0010] As further disclosed herein, embodiments of the invention are also 
directed to a system for generating a user interface of a web application program. 
The system may comprise: a repository of reusable screen components; means for 
enabling a user to create a web page layout by selecting components from the 
repository, arranging selected components within the web page, defining interaction 
between screen components, and defining interaction between screen components 
and the web application program; and means for storing rendering information of the 
web page layout to enable the web server to render of the web page. 

[001 1] In one or more embodiments, the repository of reusable screen 
components may include a tray component, a tab-strip component, a tool-bar 
component, a text area component, a form-box component, a selection-box 
component, a table-view component, a table-view-for-time-series component, and/or 
a chart component. Further, the means for storing the rendering information may 
include means for storing a layout settings of the selected components, properties of 
the selected components, and/or the handling of data represented by the selected 
components. 

[0012] Additionally, or alternatively, the means for storing rendering 
information include data storage means to store variables defining the web page 
layout. Moreover, in one or more embodiments, the system may further comprise 
means for retrieving the stored rendering information and generating hypertext mark- 
up language (HTML) code using the rendering information. 

[0013] Other embodiments and features are possible. For example, the 
means for storing rendering information may include data storage means for storing 
variables defining event handlers assigned to the reusable components. Further, the 
means for storing rendering information may include data storage means for storing 
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variables defining an application model assignment of the data presented by the 
reusable components. 

[0014] Embodiments of the invention are further directed to a computer 
readable medium and a computer program comprising instructions for generating a 
user interface according to the methods and features described herein. 

[0015] Additional objects and advantages of the invention will be set forth in 
part in the description which follows, and in part will be obvious from the description, 
or may be learned by practice of the invention. The objects and advantages of the 
invention will be realized and attained by means of the elements and combinations 
particularly pointed out in the appended claims. 

[0016] It is to be understood that both the foregoing general description and 
the following detailed description are exemplary and explanatory only and are not 
restrictive of the invention, as claimed. 

BRIEF DESCRIPTION OF THE DRAWINGS 
[0017] The accompanying drawings, which are incorporated in and constitute 
a part of this specification, illustrate several embodiments of the invention and 
together with the description, explain the principles of the invention. In the drawings: 

[0018] Figure 1 is an overview diagram of an exemplary system with a user 
interface; 

[0019] Figure 2 illustrates an exemplary architecture of a user interface; 
[0020] Figure 3 schematically illustrates an exemplary composition of a user 
interface; 

[0021] Figure 4 illustrates a screen shot of an exemplary transaction defining 
screen layout; 



4 



Customer No. 22,852 
Attorney Docket No. 08020.0002-00000 

[0022] Figure 5 illustrates a screen shot of an exemplary transaction defining 
method in specialized classes; and 

[0023] Figure 6 is a class diagram of an exemplary Ul framework. 

DETAILED DESCRIPTION 

[0024] Reference will now be made in detail to embodiments of the invention, 
examples of which are illustrated in the accompanying drawings and described 
herein. Wherever possible, the same reference numbers will be used throughout the 
drawings to refer to the same or like parts. The exemplary embodiments disclosed 
herein are intended for purposes of illustration and should not be construed to limit 
the invention in any manner. 

[0025] Embodiments of the invention may be implemented in computer 
systems or networks. By way of example, Figure 1 illustrates an exemplary system 1 
including a server device 2 and client devices 3a-3c (generally "client devices 3") 
connected by a network 4. The network 4 may comprise a local area network (LAN), 
a wide area network (WAN), an intranet, the Internet, and/or any other network. A 
user interface program 5 allows users to receive information from and input 
information into the server device 2. Client devices 3 may include Internet browser 
programs to display the user interface screens and to enable the user to enter input. 

[0026] An organization may implement the system 1 of Figure 1 to handle 
data management in some or all of the organization's business activities. This 
includes, but is not limited to, applications such as Supply Chain Management 
(SCM), Customer Relationship Management (CRM), Financials (Fl), etc. 

[0027] Figure 2 is a block diagram of an exemplary user-interface- 
architecture 10, consistent with an embodiment of the invention. The architecture 10 
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may be used to implement the user interface program 5. It may comprise a Model- 
View-Controller paradigm, a strategy in object oriented programming for separating 
the presentation of data (VIEW) 1 1 from the data maintenance (MODEL) 12 and the 
application flow control (CONTROLLER) 13. The model 12 is the representation of 
the logical structure of data in the application, the view 1 1 includes logic for 
generating web pages and the controller 13 consists of all object classes for 
communicating between model 12 and view 11. The controller 13 may include a 
page-rendering controller 14 to provide page-rending information to the view 1 1 , and 
a page data controller 15 for modifying the data stored in the model 12 according to 
the input, which may be provided by the user. 

[0028] Referring now to Figure 3, the composition of an exemplary user 
interface (Ul) is described. Consistent with an embodiment of the invention, a user 
interface framework may be provided that introduces standardization to the process 
of creating user interfaces for web applications in order to achieve code reusability: 
The raw model used for the screen layout may be based on the assumption that a 
web application 20 is made up of a navigation menu (or feature menu) 21, any given 
number of screen-frames 22 and/or any given number of graphical user interface 
(GUI) components 23-27 contained in the screen-frames 22. The GUI components 
23-27 may include any required number of different components 26-27 that may be 
configured to display business data and/or any other type of data. 

[0029] In one embodiment, the user interface framework provides all the 
components required to set up a screen layout. The components may include a tray 
component, a tab-strip component, a toolbar component, a text area component, a 
form-box component, a selection-box component, a chart component, a table-view 
component, and/or a table-view-for-time-series component. The components may be 
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predefined and stored in a repository for later use. Further, application screens may 
be designed using these components as screen building blocks. 

[0030] In Figure 3, an exemplary composition of a user interface application 
screen is shown. In a browser window 20, the user interface or Ul is composed of a 
navigation tree 21 and an application screen-frame 22. The application screen-frame 
22 is composed of a first toolbar component 23, a second toolbar component 24, a 
selection-box component 25, a form-box component 26, and a table-view-for-time- 
series 27. The application screen further includes a title bar, which is set on top of it. 

[0031] Consistent with an embodiment of the invention, the framework may 
further provide a set of database tables where the layout settings and the 
components properties are stored. Figure 4 shows a screen shot of an exemplary 
transaction defining screen layout. A set of transactions is used to build the screen 
by changing the settings and properties stored in the database tables and to 
establish a relationship to the business data or other data that have to be contained 
by respective components. Figure 5 shows a screen shot of exemplary transaction 
defining methods in specialized classes. 

[0032] Establishing the relationship between screen components and 
business data or other data includes generating the required specialized classes by 
inheriting from super-classes provided by the user interface framework. The user 
interface framework may provide all the basic characteristics for the correct 
communication to the scripting language used, which may be BSP, etc., plus all 
additional features provided by the user interface framework itself. There may be a 
group of components that do not require this inheriting process, as they may not 
contain business data and may only require predefined content. These components 
may include the tray component, the tab-strip component, selection-box component 
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and/or the toolbar component. Usually, their content is subject to configuration only. 
Other components require the inheriting process, as they do contain business data 
and/or other types of data. These components may include the table-view 
component, the table-view-for-time-series component, the form-box component, 
and/or the chart component. 

[0033] Figure 6 shows a class diagram of an exemplary Ul framework. The 
class diagram 29 shows the relationship between an application 30 and its 
constituents 31-36. Every application 30 may include a navigation menu 31 and at 
least one screen-frame 32 containing one or more GUI components 33. In one 
embodiment, two different classes of GUI components may be provided: one that 
requires specialization 34 and one that does not require specialization 35. Also, 
every application 30 may include at least one application model 36. Each application 
model 36 may provide a set of different application models 37-40 for different 
applications and backend systems 41. 

[0034] Specializing a required class by inheriting allows creating objects that 
have the properties of the super-class provided by the framework, and additionally 
contain the event-handlers required to elaborate the data as a result of a user 
activity. 

[0035] For example, in an application screen layout with at least a toolbar 
component including a SAVE-button and a table-view component containing user 
editable business data, selecting and clicking the SAVE-button may be required to 
start the process of saving the user changes in the business data into the respective 
backend database of the business application. 

[0036] The set of database tables of the Ul framework may define that, when 
the SAVE-button is pressed, an event SAVETO DATABASE has to be propagated to 
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the table-view component. The table-view component may perform a particular 
action or method with a particular name defined by the application developer, when 
the event SAVETO DATABASE has been received. The component may be an 
object of a class created by the application developer and perform actions 
programmed by the application developer. The table-view component may include 
internal attributes that represent the business data in a GUI-like format. The format 
of the attributes can vary with the component, but usually is a simple structure. After 
the action has been performed, all the components present in the visible screen may 
be called and the page rendered accordingly. 

[0037] Therefore, there is no need to have detailed knowledge about the 
underlying scripting language used to create the HTML page output. It is only 
required to have knowledge about the structure and where to put the data in every 
particular component. The layout is configured separately. The merging of the 
business data and layout data is done within the Ul framework. 

[0038] Referring now again to Figures 4 and 5 and returning to the above- 
described example, the following is an exemplary process that can be performed for 
a component based-application: 

■ Model the screen-frames and name them. Choose one name or ID 
for the application APPID. 

■ Choose the IDs for the screen-frames SCRID and the IDs for the 
classes, which will contain business data APPDATAID. 

■ Create the specialized classes for the application, for the 
application model, and for the components requiring specialization by 
inheritance. 

■ Set the application specialized classes. 

■ Set the model specialized classes. 

■ Assign the application model object (APPDATAID) to its application 
ID (APPID). 

■ Set the components specialized classes. 

■ Set the screen layout. 

■ Assign the application model object to the GUI components. 

■ Define all possible fieldnames (e.g., location, product, etc.). 
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■ Configure the components. 

■ Define the event propagation. 

[0039] The Ul framework may also support pattern-based screens and/or 
mixed pattern-components screens. The procedure for creating a pattern may be 
similar to the one used for creating a component-based screen and can be 
performed by any application developer. There is no need of a pattern developer 
profile. 

[0040] The Ul framework, consistent with embodiments of the invention, can 
provide high flexibility and allow any application developer to use, create, and 
change patterns, and generate screens accordingly. Both free-style and pattern- 
based user interfaces are supported. 

[0041] There is no knowledge required regarding the scripting language 
used, for example, BSP, JSP, ASP, etc. The reutilization of written code is 
maximized. The separation of application data and user interface (Ul) can be 
achieved by usage of a Model-View -Controller paradigm, a common criterion 
followed in the software design community. Under this assumption it is always 
possible to switch from one user interface to another one, maintaining the application 
logic intact. 

[0042] A frequent problem in connection with software products is the code 
responsibility. In the event of customers reporting bugs, its is very important to 
quickly identify the responsible developer. Thus, the response time required for the 
correction can be minimized and the whole maintenance process can be simplified. 
As a matter of fact, better code and smarter software architectures can signify for 
remarkable savings in a long-term horizon. Embodiments of the present invention 
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may be implemented bearing this in mind in order to separate the responsibilities of 
application developers from the responsibilities of Ul framework developers. 

[0043] Moreover, embodiments of the invention may allow a user to change 
the layout settings at runtime, and to store those changes. Therefore, so-called 
personalization may be achieved. That is, the capability to change the properties of 
layout elements (color, element position, default page, etc.) according to the user's 
preference at runtime and retrieving the web page in that state at the next session 
logon. For instance, the order of the columns in a table-view can be changed 
according to the planning practice of a particular procurement department. 

[0044] A number of embodiments of the invention have been disclosed. 
Nevertheless, it will be understood that various modifications may be made without 
departing from the spirit and scope of the invention. Accordingly, other embodiments 
are within the scope of the following claims. 

[0045] Furthermore, other embodiments of the invention, including 
modifications and adaptations of the disclosed embodiments, will be apparent to 
those skilled in the art from consideration of the specification and practice of the 
embodiments of the invention disclosed herein. Additionally, although aspects of the 
present invention are described for being stored in memory, one skilled in the art will 
appreciate that these aspects can also be stored on other types of computer- 
readable media, such as secondary storage devices, the Internet or other 
propagation medium; and/or other forms of RAM or ROM. Therefore, it is intended 
that the specification and examples be considered as exemplary only, with a true 
scope and spirit of the invention being indicated by the following claims. 
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